<template>
    <div class="box">
    <div class="user_info" v-if="user_info">
        <p class="header">基本资料</p>
        <p><span class="key" >账号:</span><span>{{ user_info.user }}</span></p>
        <p><span class="key" >姓名:</span><span class="value" @blur="td_change($event)" id="name">{{ user_info.name }}</span></p>
        <p>
            <span class="key" >出生年月:</span>
            <input v-if="edit_show" type="date" v-model="user_info.birthday" style="border:none;borderBottom:1px solid #000;" >
            <span v-else class="value" @blur="td_change($event)" id="birthday">{{ user_info.birthday }}</span>
        </p>
        <p>
            <span class="key" >性别:</span>
            <div v-if="edit_show">
                <input v-model="user_info.gender" type="radio" name="gender" value="男" >男
                <input v-model="user_info.gender" type="radio" name="gender" value="女">女
            </div>
            <span v-else class="value" @blur="td_change($event)" id="gender">{{ user_info.gender }}</span>
        </p>
        <p><span class="key" >省份证号码:</span><span class="value" @blur="td_change($event)" id="card_id">{{ user_info.card_id }}</span></p>
        <p><span class="key" >手机号码:</span><span class="value" @blur="td_change($event)" id="phone">{{ user_info.phone }}</span></p>
        <div class="button">
            <button @click="edit" v-show="!submitShow">{{ button_text }}</button>
            <button @click="submit" v-show="submitShow">提交</button>
            <button @click="logout" v-show="!submitShow">退出登录</button>
            <button @click="edit" v-show="submitShow">取消</button>
        </div>
    </div>
    </div>
</template>

<script>

export default {
    name:'user_info',
    data(){
        return {
            user_info:null,
            button_text:'修改信息',
            submitShow:false,
            // edit_show:false,  // 是否显示编辑控件
        }
    },
    methods:{
        logout(){
            localStorage.removeItem("logininfo")
            this.$store.state.global_var.logininfo=null
            this.$toast.success("退出登录")
            setTimeout(() => {
                this.$router.push('/login')
            }, 1000);
        },
        edit(){
            let el = document.querySelectorAll(".value")
            
            if(this.button_text=='修改信息'){
                this.button_text='提交'
                this.submitShow=!this.submitShow
                el.forEach(item=>{
                    item.setAttribute("contentEditable",this.submitShow)
                    item.setAttribute("style",`border-bottom:1px solid #000;`)
                })
                el[0].focus()
            }else{
                this.button_text='修改信息'
                this.submitShow=!this.submitShow
                this.update_patient()
                el.forEach(item=>{
                    item.setAttribute("contentEditable",this.submitShow)
                    item.setAttribute("style",`border-bottom:none;`)
                })
            }
            // this.edit_show=this.submitShow
        },
        td_change(el){  // 输入病历信息后，保存病历信息
            let e = el.currentTarget
            let id = e.getAttribute("id")
            this.user_info[id]=e.innerText.trim()
        },
        submit(){  // 提交编辑信息
            // 检查用户输入的数据是否有误
            console.log(this.user_info);
            for(let item in this.user_info){
                if( item in this.$my_tools.check_data){
                    let ret = this.$my_tools.check_data[item](this.user_info[item])
                    if(ret){
                        this.$toast(ret)
                        return
                    }
                }
            }
            let conf = confirm("你确定要保存该编辑吗")
            if(!conf){
                console.log("取消编辑");
                return
            }
            this.button_text='修改信息'
            this.submitShow=!this.submitShow
            let values = document.querySelectorAll(".value")
            values.forEach((item,index)=>{
                item.setAttribute("contentEditable",this.submitShow)
            })

            // 发送ajax请求，保存数据
            console.log(this.user_info,"提交");
            this.$http({
                method:'post',
                url:'/ajax/api/edit_user',
                data:{
                    user_info:this.user_info
                }
            }).then(data=>{
                console.log(data.data);
                if(data.data=="ok"){
                    this.$toast.success("编辑成功")

                    let logininfo = this.user_info
                    // 获取当前时间戳，并设置登录有效期(1天)
                    let new_time = Date.now() + 24*60*60*1000
                    logininfo.expire = new_time
                    let logininfo_str=JSON.stringify(logininfo)
                    localStorage.setItem('logininfo',logininfo_str)
                    this.$store.state.global_var.logininfo = this.$my_tools.deepClone(logininfo)
                }else{
                    this.$toast.fail(data.data)
                }
            })
            // this.$store.state.patient[0]=this.$my_tools.deepClone(this.patient)
        },
        update_patient(){
            this.user_info=this.$my_tools.deepClone(this.$store.state.global_var.logininfo)
        }
    },
    computed:{
        edit_show(){
            return this.submitShow
        }
    },
    mounted(){
        this.user_info=this.$my_tools.deepClone(this.$store.state.global_var.logininfo)
    }
}
</script>

<style lang='scss' scoped>
.user_info{
    margin: 10px;
    padding: 10px;
    border:1px solid #ccc;
    border-radius: 20px;
    width: 400px;
    // background-color: #eee;
    .header{
        font-weight: bolder;
        justify-content: center;
    }
    p{
        margin: 10px;
        font-size: 16px;
        display: flex;
        span{
            // flex: 1;
            padding: 5px;
        }
        span:nth-of-type(1){
            width: 150px;
            font-weight: bolder;
        }
        
    }
    .button{
        margin: 20px;
        font-size: 16px;
        display: flex;
        justify-content:space-between;
    }
}
</style>